<template>
    <div v-if="show">{{ msg }}</div>
    <div v-else class="home">
        <div class="content">
            <img class="logo" src="../assets/logo.png" alt="" srcset="">
            <div class="label">收款人条件要求</div>
            <div class="section">
                <h4>申请条件</h4>
                <div class="title">18-59周岁的男士及18-54周岁女士</div>
            </div>
            <div class="section">
                <h4>所需资料</h4>
                <div class="title"><span class="circle-num">1</span>本人真实有效的二代身份证</div>
                <div class="title"><span class="circle-num">2</span>实名开立的银行卡</div>
            </div>
            <div class="section">
                <h4>放款及时</h4>
                <div class="title"><span class="circle"></span>申请成功后，极速放款!</div>
            </div>
        </div>
        <van-button class="link" type="primary" round @click="navTo">我知道了</van-button>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import router from "../router"
import axios from 'axios'
import { useRoute } from "vue-router"

const msg = ref('')
const show = ref(false)
const route = useRoute()

onMounted(async () => {
    const { data } = await axios.get(`${import.meta.env.VITE_APP_BASE_API}/api/v1/identity/check?ticket=${route.query.tk}`)

    if (data.code !== 200) {
        show.value = true
        msg.value = data.msg
    }
})

document.title = "愿e贷"
const navTo = () => router.push({ path: '/submit', query: { tk: route.query.tk } })

</script>

<style lang="scss" scoped>
.home {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--app-bg);

    .content {
        width: 100%;
        background-color: #fff;
    }

    .logo {
        display: flex;
        width: 100px;
        height: 100px;
        margin: 40px auto 25px;

    }

    .label {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.9);
        text-align: center;
        margin-bottom: 20px;
    }

    .section {
        padding: 0 0 16px 12px;

        h4 {
            color: #000;
            font-size: 15px;
            margin: 0;
        }

        .title {
            margin-top: 10px;
            font-size: 13px;
            color: #969696;
            display: flex;
            align-items: center;
            letter-spacing: 1px;
        }

        .circle-num {
            display: inline-block;
            width: 18px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            font-size: 12px;
            border-radius: 50%;
            background-color: var(--van-button-primary-background);
            color: #fff;
            margin-right: 4px;
        }

        .circle {
            @extend .circle-num;
        }
    }

    .link {
        width: 80%;
        margin: 0 auto;
        margin-top: 20px;
    }
}
</style>
